<template>
  <view>
    <HeadNav></HeadNav>
    <!-- <search @click="gotoSearch"></search>
     -->
    <view class="search-box">
      <!-- <search @click="gotoSearch"></search> -->
      <uni-search-bar @confirm="inputSearch" v-model="searchValue" class="search_class"></uni-search-bar>
      <view class="icon">
        <uni-icons type="cart-filled" size="28" color="#D5DDE5" @click="goShoppingCar"></uni-icons>
      </view>
    </view>
    <!-- 滑动区 -->
    <view class="scroll-view-container">
      <!-- 左侧的滑动区 -->
      <scroll-view scroll-y="true" class="left-scroll-view">
        <block v-for="(item, i) in Category" :key="item.varietyId">
          <view :class="['left-scroll-view-item',i === active ? 'active' : '']" @click="activeChanged(i)">
            {{item.varietyName}}
          </view>
        </block>
      </scroll-view>
      <!-- 右侧滑动区 -->
      <scroll-view scroll-y="true" class="right-scroll-view">
        <!-- banner图 -->
        <view class="right-scroll-banner">
          <image src="@/static/sort/sortBanner.jpg" mode="widthFix"></image>
        </view>
        <!-- 循环渲染模块二级分类 -->
        <view class="right-scroll-main-content">
          <u-grid :border="false">
            <u-grid-item v-for="(item2,i2) in catelevel2" :key="i2" @click="gotoGoodsList(item2)"
              :customStyle="{marginTop:20+'rpx'}">
              <image :src="imgPrefixAddress + item2.varietysIcon" style="width: 60px;height: 50px;"></image>
              <text class="grid-text">{{item2.varietysName}}</text>
            </u-grid-item>
          </u-grid>
        </view>
      </scroll-view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 搜索框的值
        searchValue: '',
        Category: [],
        active: 0,
        // 二级分类的列表
        catelevel2: [],
        // 图片前缀
        imgPrefixAddress: "https://bjlr-1316909348.cos.ap-chengdu.myqcloud.com",
      };
    },
    onLoad() {
      // 获取分类数据
      this.getCategory()
    },
    methods: {
      // 首页点击购物车事件
      goShoppingCar() {
        if (uni.getStorageSync('token') == '') return uni.$showMsg('未登录，请登录')
        uni.redirectTo({
          url: '/subpkg/buyCar/buyCar'
        })
      },
      // 首页搜索事件
      inputSearch(e) {
        uni.navigateTo({
          url: `/subpkg/search/search?goodsName=${e.value}`
        })
      },
      // 改变激活项
      activeChanged(i) {
        this.active = i
        this.catelevel2 = this.Category[i].children
      },
      gotoSearch() {
        uni.navigateTo({
          url: '/subpkg/search/search'
        })
      },
      // 获取所有分类数据
      async getCategory() {
        const {
          data: res
        } = await uni.$http.get('/main/query/classify')
        //如果请求失败
        if (res.code !== 200) return uni.$showMsg()
        res.data.Category.forEach(item => {
          item.children = []
        })
        for (let i = 0; i < res.data.Category.length; i++) {
          for (let k = 0; k < res.data.Categorys.length; k++) {
            if (res.data.Category[i].varietyId === res.data.Categorys[k].varietyId) {
              res.data.Category[i].children.push(res.data.Categorys[k])
            }
          }
        }
        this.Category = res.data.Category
        //为二级分类赋值
        this.catelevel2 = this.Category[0].children
      },
      // 点击商品跳转
      gotoGoodsList(goods) {
        uni.navigateTo({
          url: '/subpkg/search/search?varietysId=' + goods.varietysId
        })
      }
    }
  }
</script>

<style lang="scss">
  // 搜索框
  .search-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .search_class {
      width: 80%;
    }

    .icon {
      width: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .scroll-view-container {
    display: flex;

    // 左边
    .left-scroll-view {
      width: 25%;

      .left-scroll-view-item {
        width: 100%;
        height: 60px;
        text-align: center;
        line-height: 60px;
        background-color: #F3F5F8;

        &.active {
          background-color: #000000;
          color: #F3F5F8;
        }
      }

    }

    // 右边
    .right-scroll-view {
      width: 75%;

      .right-scroll-main-content {
        display: flex;
        flex-wrap: wrap;

        .grid-text {
          font-size: 12px;
          color: #3D3D3D;
        }


      }
    }
  }

  // .search-box {
  //   width: 100%;
  //   display: flex;
  //   align-items: center;

  //   .search_class {
  //     width: 330px;
  //   }
  // }
</style>